<template>
  <div>
    <div class="data-panel">
    </div>
    <baidu-map
      :zoom="zoom"
      @ready="handler"
      class="bm-view"
      :scroll-wheel-zoom="true"
      :center="center"
    >
      <!-- scroll-wheel-zoom：能否通过滚轮缩放地图 -->
    </baidu-map>
  </div>
</template>


<script>
import { getMarker } from "@/api/dangerwarning/map";

export default {
  data() {
    return {
      center: { lng: 119.2212819999, lat: 34.596544 },
      // 缩放级别
      zoom: 14,
      markers: [],
      BMap: null,
      map: null,
    };
  },
  mounted() {
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    //发起网络请求,获取到marker
    getMarker().then((res) => {
      this.markers = res.data;
    });
    console.log("mounted加载了");
    loading.close();
  },
  watch: {
    markers: {
      deep: true,
      handler: function () { 
        console.log("动态更新开始")
        let BMap = this.BMap;
        let map = this.map;
        this.$nextTick(() => {
          this.handler({ BMap, map });
        });
      },
    },
  },
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      var baseUrl = "../../../assets/images/danger-level";
      let self = this;
      var pointArray = this.markers;
      for (var i = 0; i < pointArray.length; i++) {
        var item = pointArray[i];
        var point = new BMap.Point(item.longitude, item.latitude);
        switch (item.dangerLevel) {
          case 1:
            var myIcon = new BMap.Icon(
              require("../../../assets/images/danger-level/lowDanger.png"),
              new BMap.Size(32, 44)
            );
            var circle = new BMap.Circle(point, item.range, {
              strokeColor: "#00a9e7",
              strokeWeight: 1,
              strokeOpacity: 0.5,
              fillColor: "#00a9e7", //填充色
              fillOpacity: 0.3, //填充透明度
            });
            break;
          case 2:
            var myIcon = new BMap.Icon(
              require("../../../assets/images/danger-level/mediumDanger.png"),
              new BMap.Size(32, 44)
            );
            var circle = new BMap.Circle(point, item.range, {
              strokeColor: "#e7db00",
              strokeWeight: 1,
              strokeOpacity: 0.5,
              fillColor: "#e7db00", //填充色
              fillOpacity: 0.3, //填充透明度
            });
            break;
          case 3:
            var myIcon = new BMap.Icon(
              require("../../../assets/images/danger-level/bigDanger.png"),
              new BMap.Size(32, 44)
            );
            var circle = new BMap.Circle(point, item.range, {
              strokeColor: "#ee9a4f",
              strokeWeight: 1,
              strokeOpacity: 0.5,
              fillColor: "#ee9a4f", //填充色
              fillOpacity: 0.3, //填充透明度
            });
            break;
          case 4:
            var myIcon = new BMap.Icon(
              require("../../../assets/images/danger-level/biggerDanger.png"),
              new BMap.Size(32, 44)
            );
            var circle = new BMap.Circle(point, item.range, {
              strokeColor: "#de0000",
              strokeWeight: 1,
              strokeOpacity: 0.5,
              fillColor: "#de0000", //填充色
              fillOpacity: 0.3, //填充透明度
            });
            break;
          default:
            break;
        }

        // 自定义图标
        var marker = new BMap.Marker(point, { icon: myIcon });
        //创建圆
        map.addOverlay(marker);
        map.addOverlay(circle);
        // // 设置标记物上的文字
        // marker.setLabel(new BMap.Label("标记点说明"));
        // // 调用点击标记物显示信息弹窗
        // this.setInfo(map, marker, position);
      }
    },
    // 设置点击地图标记点信息弹窗的内容 self指代window,避免与地图fuc的this混淆
    setInfo(map, marker, pt) {
      let self = this;
      var opts = {
        width: 170, // 信息窗口宽度
        height: 170, // 信息窗口高度
        title: "位置信息", // 信息窗口标题
      };
      console.log("111111");
      marker.addEventListener("click", function (e) {
        // 逆地址解析-根据经纬度获取中文地址
        self.getAddress(pt);
        // 设置延迟，等获取到中文地址再显示弹窗信息
        self.$nextTick(() => {
          setTimeout(() => {
            str =
              "经度：" +
              pt.lng +
              "<br>纬度：" +
              pt.lat +
              "<br>地址：" +
              self.address;
            let infoWindow = new BMap.InfoWindow(str, opts); // 创建信息窗口对象
            console.log(str);
            map.openInfoWindow(infoWindow, pt); //开启信息窗口
          }, 200);
        });
      });
    },
    // 逆地址解析-根据经纬度获取中文地址
    getAddress(point) {
      let self = this;
      let geoc = new BMap.Geocoder({
        extensions_town: true,
      });
      // 根据坐标得到地址描述
      geoc.getLocation(new BMap.Point(point.lng, point.lat), function (result) {
        if (result) {
          self.address = result.address;
        }
      });
    },
  },
};
</script>

<style  scoped>
.bm-view {
  width: 100%;
  height: 90vh;
}
.data-panel{

}
</style>
